<template>
	<view class="app-login">
		<block v-if="status == 0">
			<view class="mode flex-box">
				短信将发送至<text class="sign-tel">({{String(userInfo.tel) | intercept}})</text>
			</view>
			<view class="mode flex-box">
				<input type="text" v-model="input.auth_code"  maxlength="6" class="box-1" placeholder="输入验证码" />
				<!-- <u-verification-code :seconds="60" ref="uCode" @change="codeChange"></u-verification-code> -->
				<u-code :seconds="60" ref="uCode" @change="codeChange"></u-code>
				<text class="getcode" @tap="getAuthCode">{{code_text}}</text>
			</view>
		</block>
		<view class="mode flex-box">
			<input type="password" v-model="input.pwd" class="box-1" maxlength="6" placeholder="支付密码(6位纯数字)" />
		</view>
		<view class="mode flex-box">
			<input type="password" v-model="pwd" maxlength="6" class="box-1" placeholder="确认支付密码" />
		</view>
		<view class="btn" hover-class="none" @tap="editPay">确认</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				status:1,
				input: {
					auth_code: '',
					pwd: '',
				},
				pwd: '',
				code_text:'获取验证码',
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(){
			this.$u.api.queryPayPwd()
			.then(res=>{
				if(res.status){
					this.status = res.msg
				}
			})
			.catch(err=>{console.log(err);})
		},
		methods:{
			codeChange(text) {
				this.code_text = text;
			},
			getAuthCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					this.$u.api.smsCode({
							flag: "paypwd",
							tel: this.userInfo.tel
						})
						.then(res => {
							this.$refs.uCode.start();
						})
						.catch(err => {
							console.log(err);
						})
				}
			},
			editPay(){
				if(!this.checkingNull()) return
				this.is_loading=true;
				this.$u.api.changePayPwd(this.input).then(res=>{
					this.is_loading=false;
					if(res.status){
						this.input.auth_code = ''
						this.input.pwd = ''
						this.pwd = ''
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
				.catch(err=>{
					this.is_loading = false;
					console.log(err);
					uni.showToast({
						icon: 'none',
						title: "网络异常，请稍后再试"
					})
				});
			},
			checkingNull() {
				if (this.status == 0 && !this.input.auth_code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}
				if (this.status == 0 && !this.$u.test.code(this.input.auth_code, 6)) {
					uni.showToast({
						icon: 'none',
						title: '验证码有误'
					})
					return false
				}
				if (!this.input.pwd) {
					uni.showToast({
						icon: 'none',
						title: '请设置密码'
					})
					return false
				}
				if (!this.$u.test.code(this.input.pwd,6)) {
					uni.showToast({
						icon: 'none',
						title: '密码格式有误'
					})
					return false
				}
				if (this.pwd != this.input.pwd) {
					uni.showToast({
						icon: 'none',
						title: '两次密码不一致'
					})
					return false;
				}
				return true
			},
			
		},
		filters: {
			intercept(para) {
				return para.substr(0, 3) + ' **** ' + para.substr(para.length - 4)
			}
		}
	}
</script>

<style lang="less">
	// @import url('@/common/css/comm.less');

	page {
		background:#fff;
	}

	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		display: block;
		width: 90%;
		height: 70rpx;
		background: #d0abf4;
		border-radius: 70rpx;
		box-shadow: 0 10rpx 10rpx #d0abf4;
		margin: 30rpx auto;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
	}
	.app-login {
		padding:0 30rpx;

		button {
			margin: 100rpx auto 0;
		}
		.sign-tel{
			color:#ff0000;
			font-size:26rpx;
		}

		.mode {
			padding: 30rpx 0;
			border-bottom: 1px solid #EEEEEE;

			.getcode {
				min-width: 160rpx;
				text-align: center;
				border-left: 1px solid #EEEEEE;
				padding-left: 20rpx;
				
			}
		}

		.login-title {
			font-size:48rpx;
			font-weight: bold;
			margin-bottom: 50rpx;
		}
	}
</style>
